<template>
  <div class="myList">
    <ul>
      <li
        v-for="item in listData"
        :key="item.product_id"
        @click="goDetail(item.product_id)"
      >
        <router-link to="">
          <img :src="$target + item.product_picture" :alt="item.product_name" />
          <h2>{{ item.product_name }}</h2>
          <h3>{{ item.product_title }}</h3>
          <p>
            <span>{{ item.product_selling_price }}元</span>
            <span
              v-if="item.product_selling_price != item.product_price"
              class="del"
            >
              {{ item.product_price }}元</span
            >
          </p>
        </router-link>
      </li>
      <li id="more" v-if="!isMore"  @click="toGoods">
        <router-link
           to=""
        >
          浏览更多
          <i class="el-icon-d-arrow-right"></i>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyList",
  props: ["listData", "isMore"],
  data() {
    return {};
  },

  watch: {},

  created() {},

  mounted() {},

  methods: {
    goDetail(id) {
      this.$emit("goDetail", id);
    },
    toGoods(){
      // alert(11)
      let list = [];
      this.listData.forEach(item=>{
        list.push(item.category_id)
      })

      function data(arr){
        return [...new Set(arr)];
      }
      let arr = data(list);
      console.log(arr);
      this.$router.push({path:'/goods',query:{categoryId:arr}})
    }
  },

  computed: {
    // // 通过list获取当前显示的商品的分类ID，用于“浏览更多”链接的参数
    // categoryID: function () {
    //   let categoryID = [];
    //   if (this.listData != "") {
    //     for (let i = 0; i < this.listData.length; i++) {
    //       const id = this.listData[i].category_id;
    //       if (!categoryID.includes(id)) {
    //         categoryID.push(id);
    //       }
    //     }
    //   }
    //   return categoryID;
    // },
  },
};
</script>

<style lang="scss" type="text/scss" scoped>
.myList {
  ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    li {
      position: relative;
      // float: left;

      padding: 10px 0;
      margin: 0 0 14.5px 13.7px;
      width: 215px;
      height: 270px;
      background-color: #fff;
      transition: all 0.2s linear;
      z-index: 1;

      &#more {
        text-align: center;
        line-height: 280px;
        font-size: 18px;
        color: #333;
      }

      img {
        display: block;
        width: 160px;
        height: 160px;
        // background: url("../assets/imgs/placeholder.png") no-repeat 50%;
        margin: 0 auto;
      }
      h2 {
        margin: 25px 10px 0;
        font-size: 14px;
        color: #333;
        font-weight: 400;
        text-align: center;

        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      h3 {
        margin: 5px 10px;
        height: 18px;
        font-size: 12px;
        font-weight: 400;
        color: #b0b0b0;
        text-align: center;

        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      p {
        margin: 10px 10px 10px;
        text-align: center;
        color: #ff6700;
        .del {
          margin-left: 0.5em;
          color: #b0b0b0;
          text-decoration: line-through;
        }
      }
    }
    li:hover {
      transform: translateY(-3px);
      box-shadow: 0 3px 10px #ccc;
    }
  }
}
</style>
